<template>
  <div class="stationContainer">
    <van-nav-bar
      title="修改岗位"
      @click-left="$router.back()"
      :right-text="save ? '' : '保存'"
      @click-right="editUserInfo"
    >
      <template #left>
        <van-icon name="down" />
      </template>
    </van-nav-bar>
    <van-cell-group>
      <van-field
        v-model="userInfo.position"
        placeholder="请输入需要修改的岗位名称"
        @input="chang()"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { editUserInfoApi } from "./mine";
import { mapState, mapMutations } from "vuex";
export default {
  name: "station",
  data() {
    return {
      // value: "", //岗位的值
      save: true, //保存按钮显示或隐藏
    };
  },
  methods: {
    ...mapMutations(["SET_USERINFO"]),
    //保存按钮时
    async editUserInfo() {
      const res = await editUserInfoApi({ position: this.userInfo.position });
      this.SET_USERINFO({
        ...this.userInfo,
        ...res.data.data,
      });
      this.$toast.success("更新成功");
      this.$router.go(-1);
    },

    //输入框发生变化时
    chang() {
      // save 显示true就隐藏，默认隐藏。如果触发了input就按钮显示
      this.save = false;
      // 等于空的时候也隐藏
      if (this.value == "") {
        this.save = true;
      }
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>

<style lang="less" >
.stationContainer {
  i.van-icon.van-icon-down {
    transform: rotate(90deg);
    color: #222222;
    font-size: 40px;
    font-weight: 300;
  }
  .van-nav-bar__title.van-ellipsis {
    font-weight: 700;
    color: #222222;
    font-size: 36px;
  }
  .van-icon-down {
    transform: rotate(90deg);
    color: #222222;
    font-size: 40px;
  }
  .van-cell-group.van-hairline--top-bottom {
    box-sizing: border-box;
    width: 690px;
    background-color: #f7f4f5;
    margin: 30px;
    border-radius: 30px;
    overflow: hidden;
    .van-cell.van-field {
      background-color: #f7f4f5;
      overflow: hidden;
      border-radius: 30px;
    }
  }
}
</style>